<template>
    <div>
      <el-select placeholder="ModelNumber" clearable filterable v-model="input.modelNumbers" @change="chooseModelNumber" >
       <el-option v-for="product in inputProductList"  :key="product.key" :value="product.productModelNumber" :label="product.productModelNumber"></el-option>
      </el-select>
<!-- 
      <select   size="10" class="el-input el-input--3 el-input--suffix"   v-model="show.modelNumbers" @change="chooseModelNumberSearch" >
       <option label="查询所有数据" ></option>
        <option v-for="product in showProductList"  :key="product.productModelNumber" :value="product.productModelNumber" :label="product.productModelNumber"></option>
      </select> -->
      <div class="UserLeftSelect-wrap">
        <ul>
          <li @click="chooseModelNumberSearch(product.productModelNumber)" v-for="product in showProductList" :key="product.key" :class="product.productModelNumber === show.modelNumbers?'curren':''">
              {{product.productModelNumber}}
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
    export default {
        name: "productLeftSelect",
      data(){
          return{
            input:{modelNumbers:"SW-01"},
            show:{modelNumbers:"SW-01"}, 
            inputProductList:[],
            showProductList:[],
            userChargeList:[],    //产品负责人列表
          }
      },
      created(){
        this.init()
      },
      methods:{
          init(){
            this.input.modelNumbers = "SW-01"
            this.initModelNumber()
          },

        initModelNumber(){
          var url =  this.GLOBAL.productService  + "/productSubscription/findModelNumberAll"
          this.$ajax.get( url,{
          }).then(res => {
            if(res.data.code == "200"){
              var data = res.data.data
              this.inputProductList = data
              this.showProductList = data
            }
          })
        },
        chooseModelNumber(){
          var modelNumbers = this.input.modelNumbers
          if(modelNumbers == null || modelNumbers ==  ""){
              this.initModelNumber()
          }else {
            console.log("modelNumbers")
            console.log(modelNumbers)

            this.showProductList = []
            var product = {productModelNumber:modelNumbers}
            this.showProductList.push(product)


            /*for(var i = 0; i < modelNumbers.length; i++){
              var product = {productModelNumber:modelNumbers[i]}

            }*/
            console.log("showProductList")
            console.log(this.showProductList)
          }
        },
        chooseModelNumberSearch(id){
          this.show.modelNumbers = id
          var productModelNumbers = this.show.modelNumbers
          this.$emit("sendModelNumbers", this.show.modelNumbers);

        }
      }

    }
</script>

<style lang="stylus" scoped>
.el-select{
  margin-top 22px;
  width 100%
}
.UserLeftSelect-wrap{
    margin-top 20px;
    border 1px solid #eeeeee
    overflow auto
    max-height 400px
    ul{
      li{
        font-size 14px;
        padding 8px 15px
        color #666
        overflow hidden
        text-overflow: ellipsis;
        white-space: nowrap;

        &:hover{
          background #eeeeee
          cursor pointer
        }
        &.curren{
          background #409eff
          color #ffffff
          cursor pointer
        }
      }
    }
  }
</style>
